<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div style="width: 500px;background-color: #0044CC;">
			<div style="border: 1px solid black;">
        <span style="float: left;">aaa</span>
        <span style="float: right;">bbb</span>
        <div style="clear: both;"></div>
      </div>
			<div style="padding-left: 30px;padding-right: 30px;border: 1px solid black;width: unset;">
        <span style="float: left;">aaa</span>
        <span style="float: right;">bbb</span>
        <div style="clear: both;"></div>
      </div>
      <div style="padding-left: 30px;padding-right: 30px;border: 1px solid pink;width: 100%">
        <span style="float: left;">aaa</span>
        <span style="float: right;">bbb</span>
        <div style="clear: both;"></div>
      </div>
		</div>
		<div style="width: 500px;padding-left: 30px;padding-right: 30px;border: 1px solid black;">
      <span style="float: left;">aaa</span>
      <span style="float: right;">bbb</span>
      <div style="clear: both;"></div>
    </div>
    <div style="width: 20%;padding-left: 30px;padding-right: 30px;border: 1px solid black;">
      <span style="float: left;">aaa</span>
      <span style="float: right;">bbb</span>
      <div style="clear: both;"></div>
    </div>
    <div style="width: 20%;border: 1px solid black;">
      <span style="float: left;">aaa</span>
      <span style="float: right;">bbb</span>
      <div style="clear: both;"></div>
    </div>
		<div style="bottom: 1px;margin-left: -6px;border-bottom-width: 0;border-top: 6px solid black;"></div>
		<button onclick="alert(obj.name)">get</button>
		<button onclick="obj.name = 'dfd'">set</button>
		<button onclick="alert(obj.fullName)">get</button>
	</body>
	<script type="text/javascript">
		console.log('after clear',{a:3}?.b||'d');
		console.log('after clear',new Set(['a','f','f','f']));
		let a,b;
		[a, b] = [1, 2];
		console.log('[a, b]', a, b);
		({a, b} = { a:'f', b:'g' });
		console.log('{a, b}', a, b);
		let c = false ? a = 9 : b = 14;
		console.log('a, b', c, a, b);
		let watcher = {},target = null;
		var obj = {
			name: 'l',
			get fullName() {
				//console.log('full name111 is ' + this.name);
				return 'fall name is ' + this.name;
			}
		};
		Object.keys(obj).forEach(function(key) {
		  defineReactive(obj, key, obj[key]);
		})
		function defineReactive(data, key, val) {
			var property = Object.getOwnPropertyDescriptor(data, key);
			var getter = property && property.get;
			//var setter = property && property.set;
			Object.defineProperty(data, key, {
				configurable: true,
				enumerable: true,
				set(newValue) {
					console.log(key + 'value have set:' + newValue);
					val = newValue;
				},
				get() {
					var value = getter?.call(data) || val;
					console.log('full name222 is ' + key);
					!!!watcher[key] && (watcher[key] = []);
					watcher[key].push(!!target ? target : key);
					return value;
				}
			});
		}
		target = 'fullName'
		var vvvv = obj[target];
		target = null;
		console.log('watcher', watcher);
	</script>
</html>
